<template>
  <div class="upload-page" ref="form">
    <div class="uploader-wrap">
      <label :class="['uploader-label', {'has-photo': photo}]" for="photo" :style="{backgroundImage: photo ? `url(${photo})` : ''}"></label>
      <input class="uploader-input" type="file" id="photo" accept="image/*" @change="fileChange" ref="uploaderInput"/>
    </div>
    <div class="background" alt=""></div>
    <div class="gender-select">
      <div :class="['gender-male', 'scale-on-active', {checked: gender === 'male'}]" @click="setGender('male')"></div>
      <div :class="['gender-female', 'scale-on-active', {checked: gender === 'female'}]" @click="setGender('female')"></div>
    </div>
    <img src="@/assets/images/upload-btn.png" class="submit-btn scale-on-active" @click="submit"/>
    <div class="toast" v-show="showToast">请上传照片</div>

    <img class="hidden-img" src="@/assets/images/loading-bg.png" alt=""/>
    <img class="hidden-img" src="@/assets/images/loading-flag.png" alt=""/>
    <img class="hidden-img" src="@/assets/images/loading-clipper.png" alt=""/>
  </div>
</template>

<script>
import {mapActions, mapGetters} from 'vuex'
import {zipImage} from '@/utils/common'
import lrz from 'lrz'
import {hairList} from '@/config/index'
import eventBus from '@/store/eventBus'
export default {
  name: 'uploadPage',
  data: () => ({
    isFirstPhotoReady: false,
    showToast: false,
    toastTimer: null
  }),
  computed: {
    ...mapGetters([
      'photo', 'gender', 'correctFace'
    ])
  },
  created () {
    window._hmt.push(['_trackEvent', '上传页', 'view', '进入上传页'])
    this.clearResult()
    this.clearFaceId()
    this.setPhoto('')
    eventBus.$on('firstPhotoReady', () => {
      this.isFirstPhotoReady = true
    })
  },
  mounted () {
    this.$refs.uploaderInput.value = ''
  },
  methods: {
    ...mapActions([
      'setPhoto', 'setGender', 'getMergedFace', 'clearResult', 'clearFaceId', 'setFaceId', 'setGender', 'uploadFace'
    ]),
    async fileChange (evt) {
      let file = evt.target.files[0]
      // lrz压缩图片
      lrz(file).then(async (rst) => {
        this.setPhoto(await zipImage(rst.base64))
        // 清除input的value，解决如果下次上传相同图片不会触发fileChange函数的情况
        this.$refs.uploaderInput.value = ''
        await this.uploadFace(this.photo)
      })
    },
    submit () {
      window._hmt.push(['_trackEvent', '上传页-点击解锁发型', 'click'])
      if (!this.correctFace) {
        this.$router.push({
          name: 'errors',
          query: {
            from: 'upload',
            error: 'face-error'
          }
        })
        return
      }
      if (this.photo) {
        window._hmt.push(['_trackEvent', '上传页-性别选择', this.gender === 'male' ? '男' : '女'])
        if (this.isFirstPhotoReady && this.correctFace) {
          // 如果第一张图片已经加载完成，且人脸识别正确，则跳过loading直接进入确认页
          this.$router.push({
            name: 'confirm',
            query: {
              'id': hairList[this.gender][0].id
            }
          })
        } else {
          this.$router.push({
            name: 'loading'
          })
        }
      } else {
        // 如果没有上传图片，则toast提示
        if (this.toastTimer) {
          clearTimeout(this.toastTimer)
        }
        this.showToast = true
        this.toastTimer = setTimeout(() => {
          this.showToast = false
        }, 2000)
      }
      return false
    }
  }
}
</script>

<style lang="scss">
  .upload-page {
    position: relative;
    width: 100%;
    height: 100%;
    .background {
      background: {
        image: url(~@/assets/images/upload-bg.png);
        size: cover;
        position: center;
      };
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    .uploader-wrap {
      .uploader-label {
        position: absolute;
        width: 399px;
        height: 511px;
        top: 50%;
        left: 170px;
        right: 151px;
        transform: translateY(-50%);
        background: {
          size: cover;
          position: center;
          repeat: no-repeat;
        }

        @media (max-aspect-ratio: 9/16) {
          transform: translateY(-50%) scale(1.1);
        }

        @media (max-aspect-ratio: 1/2) {
          transform: translateY(-50%) scale(1.2);
        }

        &:after {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          background: {
            image: url(~@/assets/images/upload-add.png);
            size: 80px 96px;
            position: center;
            repeat: no-repeat;
          }
        }
        &.has-photo {
          &:after {
            display: none;
          }
        }
      }
      .uploader-input {
        display: none;
      }
    }
    .gender-select {
      & > [class^=gender-] {
        bottom: 302px;

        @media (min-aspect-ratio: 9/16) {
          bottom: 250px;
        }
        @media (min-aspect-ratio: 10/16) {
          bottom: 220px;
        }
        @media (min-aspect-ratio: 10/15) {
          bottom: 205px;
        }
        @media (min-aspect-ratio: 11/16) {
          bottom: 185px;
        }
        @media (min-aspect-ratio: 12/16) {
          bottom: 150px;
        }
        &.checked {
          &:after {
            content: '';
            position: absolute;
            right: 5px;
            top: 8px;
            width: 40px;
            height: 35px;
            background: {
              image: url(~@/assets/images/upload-checkmark.png);
              size: 100% 100%;
            }
          }
        }
      }
      .gender-male {
        position: absolute;
        left: 214px;
        width: 129px;
        height: 69px;
        background: {
          image: url(~@/assets/images/upload-male.png);
          size: 100% 100%;
        }
      }
      .gender-female {
        position: absolute;
        right: 225px;
        width: 134px;
        height: 73px;
        background: {
          image: url(~@/assets/images/upload-female.png);
          size: 100% 100%;
        }
      }
    }
    .submit-btn {
      position: absolute;
      width: 381px;
      height: 110px;
      bottom: 162px;
      left: 181px;
      @media (min-aspect-ratio: 9/16) {
        bottom: 100px;
      }
      @media (min-aspect-ratio: 10/16) {
        bottom: 80px;
      }
      @media (min-aspect-ratio: 11/16) {
        bottom: 60px;
      }
      @media (min-aspect-ratio: 12/16) {
        bottom: 30px;
      }

    }
    .toast {
      position: fixed;
      top: 60%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.5);
      text-align: center;
      font-size: 26px;
      line-height: 1;
      padding: 24px;
      color: #ffffff;
      -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
      border-radius: 15px;
    }
  }
</style>
